<template>
  <!-- :class="{fade}" 对象的简写形式 -->
  <div v-if="fade" :class="{fade}" class="xtx-confirm">
    <!-- wrapper才是弹出的确认框 -->
    <div :class="{fade}" class="wrapper">
      <div class="header">
        <h3>{{ title }}</h3>
        <a class="iconfont icon-close-new" href="javascript:;" @click="cancel"></a>
      </div>
      <div class="body">
        <i class="iconfont icon-warning"></i>
        <span>{{ text }}</span>
      </div>
      <div class="footer">
        <XtxButton size="mini" type="gray" @click="cancel">取消</XtxButton>
        <XtxButton size="mini" type="primary" @click="submit">确认</XtxButton>
      </div>
    </div>
  </div>
</template>

<script>

// 当前组件不是在APP容器下渲染, 无法使用APP下的环境(全局组件, 全局指令, 原型属性函数)
import XtxButton from '@/components/library/XtxButton'
import { onMounted, ref } from 'vue'

export default {
  name: 'XtxConfirm',
  components: { XtxButton },
  props: {
    title: {
      type: String,
      default: '温馨提示'
    },
    text: {
      type: String,
      default: ''
    },
    cancelCallback: {
      type: Function
    },
    submitCallback: {
      type: Function
    }
  },
  setup(props) {
    // 对话框默认隐藏
    const fade = ref(false)

    // 组件渲染完毕后显示
    onMounted(() => {
      setTimeout(() => {
        // 过渡效果需要在元素创建完毕后延时一会加上才会触发
        fade.value = true
      }, 0)
    })

    // 取消
    const cancel = () => {
      props.cancelCallback()
    }
    // 确认
    const submit = () => {
      // 使用props上面方法, 是组件使用者提供的, 并非自己提供的
      props.submitCallback()
    }

    return {
      fade,
      cancel,
      submit
    }
  }
}
</script>

<style lang="less" scoped>
.xtx-confirm {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 8888;
  // 占满浏览器窗口 宽高
  width: 100%;
  height: 100%;

  transition: all 0.4s;
  background: rgba(0, 0, 0, 0);

  &.fade {
    background: rgba(0, 0, 0, 0.5);
  }

  .wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 160px;
    padding: 0 20px;

    border-radius: 4px;
    background: #fff;

    // 过渡效果
    transition: all 0.4s;
    transform: translate(-50%, -60%);
    opacity: 0;

    &.fade {
      transform: translate(-50%, -50%);
      opacity: 1;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;

      h3 {
        font-weight: 400;
        font-size: 18px;
      }

      a {
        font-size: 20px;
        color: #999;

        &:hover {
          color: #666;
        }
      }
    }

    .body {
      height: 62px;
      padding-left: 20px;
      // 行高这个属性是可以继承的
      line-height: 62px;
      font-size: 16px;

      i {
        padding-right: 3px;
        color: @priceColor;
        vertical-align: middle;
      }

      span {
        vertical-align: middle;
      }

    }

    .footer {
      position: relative;
      top: -4px;
      text-align: right;
      height: 50px;
      line-height: 50px;

      .xtx-button {
        margin-left: 20px;
      }
    }
  }
}
</style>
